<template>
  <div>
    <el-form
      ref="authenticationFormRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      label-position="top"
    >   
		<div class="http-authentication">
			<el-row :gutter="20">
			  <el-col :span="12">
			    <el-form-item label="用户名" prop="username">
			      <el-input v-model="formData.username" placeholder="请输入用户名" />
			    </el-form-item>
			  </el-col>
			  <el-col :span="12">
			    <el-form-item label="密码" prop="password">
			      <el-input
			        v-model="formData.password"
			        type="password"
			        placeholder="请输入密码"
			        show-password
			      />
			    </el-form-item>
			  </el-col>
			</el-row>
		  
			<el-form-item prop="ssl" label="SSL/TLS">
			  <el-select
				v-model="formData.ssl"
				placeholder="请选择是否启用SSL/TLS"
				style="width: 100%;"
				clearable
			  >
				<el-option label="禁用" :value="false" />
				<el-option label="启用" :value="true" />
			  </el-select>
			</el-form-item>
			
			<template v-if="formData.ssl">
			  <el-form-item label="CA证书" prop="ca">
			    <el-input
			      v-model="formData.ca"
			      type="textarea"
			      :rows="3"
			      placeholder="请输入CA证书内容"
			    />
			  </el-form-item>
			  
			  <el-form-item label="客户端证书" prop="cert">
			    <el-input
			      v-model="formData.cert"
			      type="textarea"
			      :rows="3"
			      placeholder="请输入客户端证书内容"
			    />
			  </el-form-item>
			  
			  <el-form-item label="客户端密钥" prop="key">
			    <el-input
			      v-model="formData.key"
			      type="textarea"
			      :rows="3"
			      placeholder="请输入客户端密钥内容"
			    />
			  </el-form-item>
			</template>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MqttAuthorizationField } from '@/components/DataWorkflow/types/data-collect.ts';
import { FormInstance, FormRules } from 'element-plus';

const props = defineProps<{ 
  data: MqttAuthorizationField
}>();

const authenticationFormRef = ref<FormInstance>();
const formRules = reactive<FormRules>({
  authType: [
    { required: true, message: '请输选择认证类型', trigger: 'blur' }
  ],
  basicAuthLocation: [
    { required: true, message: '请选择认证传参位置', trigger: 'blur' }
  ],
});

const formData = ref<MqttAuthorizationField>({ ...props.data });
const validate = async (): Promise<boolean> => {
  if (!authenticationFormRef.value) return false
  try {
    await authenticationFormRef.value.validate()
    return true
  } catch {
    return false
  }
}

const getData =()=> {
	return formData.value;
}

defineExpose({
  validate,
  getData
})
</script>